<template>
	<view>
		<view class="swiper">
			<view class="swiper-box">
				<rf-swipe-dot :info="swiperList" mode="nav" :current="current" field="title">
					<swiper @change="handleDotChange" autoplay="true" previous-margin="10rpx" next-margin="10rpx"
						circular="true">
						<swiper-item>
							<view class="swiper-item">
								<image :src="info.image" mode="aspectFill" />
							</view>
						</swiper-item>
					</swiper>
				</rf-swipe-dot>
			</view>
		</view>
		<view class="info">
			<view class="info-top">
				<view class="left">
					<view class="title">{{info.title}}</view>
					<!-- <view class="label"><text>{{info.taskInfo.type==1?'图文':(info.taskInfo.type==2?'音频':'视频')}}专题</text></view> -->
				</view>
			</view>
			<!-- <view class="info-bottom">
        <view class="collect">已有52人学习</view>
      </view> -->
		</view>
		<view class="cont-wrap">
			<view class="cont-tabs">
				<view :class="tabIndex == 1 ? 'active' : ''" @click="tabIndex = 1">
					内容
				</view>
				<!-- <view :class="tabIndex == 2 ? 'active' : ''" @click="tabIndex = 2">
          下载
        </view> -->
			</view>
			<view class="cont-pannel">
				<view v-show="tabIndex == 1" class="content">
					<rich-text :nodes="info.content"></rich-text>
					
				</view>
				<!-- <view v-show="tabIndex == 2">
          <view class="btn" @click="donwLoadFile">资料下载</view>
        </view> -->
			</view>
		</view>
		<!-- <button class="previewBtn" v-if="info.link" @click="preview(info.link)">立即预览</button> -->
		<navigator class="previewBtn" v-if="info.link" :url="'/pages/webView/webView?url='+info.link">立即预览</navigator>
	</view>
</template>
<script>
	import {
		bookDetail,
		bookList
	} from '@/api/product';
	import rfSwipeDot from '@/components/rf-swipe-dot';
	export default {
		components: {
			rfSwipeDot
		},
		data() {
			return {
				current: 0,
				swiperList: [{
					cover: require('@/static/logo.png'),
				}, ],
				tabIndex: 1,
				id: 0,
				specialId: 0,
				info: {}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
			this.bookList()
		},
		methods: {
			async getDetail() {
				const res = await this.$http.get(
					`${bookDetail}`, {
						id: this.id,
					}, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
					}
				);
				this.info = res.data;
			},
			async bookList() {
				const res = await this.$http
					.get(`${bookList}`, {
						type: 1
					})
				this.list = res.data
			},
			handleDotChange(e) {
				this.current = e.detail.current;
			},
			preview(link) {
				if (link) {
					//#ifdef APP-PLUS
					uni.showLoading({
						title: '文件正在打开中...'
					})
					uni.downloadFile({
						url: link,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									uni.hideLoading()
									console.log('打开文档成功');
								}
							});
						},
						fail(err) {
							uni.showToast({
								title: '文件打开失败',
								icon: 'none'
							})
							uni.hideLoading()
							console.log(err)
						}
					});
					//#endif
				}
			},
			donwLoadFile() {
				if (this.info.link) {
					uni.downloadFile({
						url: this.info.link,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.showToast({
									title: '下载成功',
									duration: 2000,
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '下载失败',
									duration: 2000,
									icon: 'success'
								});
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '下载失败',
								duration: 2000,
								icon: 'success'
							});
						}
					});
				} else {
					uni.showToast({
						title: '暂无下载链接',
						duration: 2000,
						icon: 'none'
					});
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.previewBtn{
		position: fixed;
		left: 50%;
		width: 192rpx;
		bottom: 20rpx;
		z-index: 9;
		width: 400rpx;
		transform: translate(-50%, 0);
		display: block;
		text-align: center;
		margin: 16rpx 0;
		font-size: 13px;
		background-color: #509efb;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		border-radius: 8rpx;
	}
	.top-nav {
		display: flex;
		align-items: center;
		background: $color-white;
		padding: 0 $spacing-base;
		height: 140rpx;
		background-color: $color-white;

		.left {
			margin-right: $spacing-base;
			display: flex;
			align-items: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.logo-text {
			flex: 1;
			color: $base-color;

			view {
				font-weight: bold;
			}
		}

		.right {
			background: $base-color;
			color: $color-white;
			border-radius: $border-radius-lg;
			width: 120rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}

	/*轮播图*/
	.swiper {
		width: 100%;
		padding-bottom: 20upx;
		display: flex;
		justify-content: center;
		background: $color-white;

		.swiper-box {
			width: 100%;
			height: 40vw;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 40vw;

				swiper-item {
					image {
						width: 100%;
						height: 40vw;
					}
				}
			}
		}
	}

	.info {
		background: $color-white;
		padding: $spacing-base;

		.info-top {
			display: flex;
			justify-content: space-between;
			margin: $spacing-sm $spacing-base;

			.title {
				font-size: $font-lg;
			}

			.label {
				text {
					background: rgba(44, 142, 255, 0.06);
					color: $font-color-spec;
					padding: 0 $spacing-base;
					border-radius: $border-radius-base;
				}
			}
		}

		.info-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 $spacing-base;

			view.pin-money {
				display: flex;
				align-items: center;

				view {
					font-size: 30upx;
					margin-right: $spacing-sm;

					text {
						font-size: 40upx;
					}
				}

				.price {
					color: #ff4a4a;
				}

				image {
					width: 40upx;
					height: 20upx;
				}
			}

			.total {
				color: #999;
				margin-left: $spacing-sm;
			}

			.collect {
				color: #999;
			}
		}
	}

	.cont-wrap {
		background: $color-white;
		padding: $spacing-base;
		margin-top: $spacing-base;

		.cont-tabs {
			display: flex;

			view {
				flex: 1;
				text-align: center;
				line-height: 60upx;
				font-size: $font-lg;

				&.active {
					position: relative;
					color: $base-color;

					&::after {
						position: absolute;
						content: '';
						border-bottom: 1upx solid $base-color;
						bottom: 0;
						width: 30%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.cont-pannel {
			padding-top: 20upx;

			.content {
				margin: 20upx 0 20upx 0;
			}

			.list {
				display: flex;
				align-items: center;
				padding: $spacing-base;

				image {
					width: 28upx;
					height: 28upx;
				}

				text {
					margin: 0 $spacing-sm;
				}

				.title {
					flex: 1;
				}

				.free {
					padding: 0 $spacing-base;
					color: #feb720;
					background-color: rgba(254, 183, 32, 0.1);
					border-radius: $border-radius-lg;
				}
			}

			.btn {
				margin: 40upx 0;
				width: 150upx;
				text-align: center;
				padding: 10upx $spacing-base;
				color: #feb720;
				background-color: rgba(254, 183, 32, 0.1);
				border-radius: $border-radius-lg;
			}
		}
	}
</style>
